<template>
  <div class="main-content">
      <div class="container content-wrapper">
        <!-- 左侧菜单 -->
        <div class="sidebar">
          <div class="sidebar-menu">
            <div class="menu-item active">
              <i class="el-icon-user"></i>
              <span>个人中心</span>
            </div>
            <div class="menu-item">
              <i class="el-icon-bell"></i>
              <span>系统通知</span>
            </div>
            <div class="menu-item">
              <i class="el-icon-document"></i>
              <span>我的收藏</span>
            </div>
            <div class="menu-item">
              <i class="el-icon-notebook-1"></i>
              <span>浏览记录</span>
            </div>
          </div>
        </div>

        <!-- 右侧内容区 -->
        <div class="content">
          <div class="panel">
            <div class="panel-header">
              <h3>我的账号</h3>
            </div>
            <div class="panel-body">
              <div class="form-section">
                <h4>账号信息</h4>
                <el-form :model="userForm" label-width="80px">
                  <el-form-item label="昵称">
                    <div class="form-item-row">
                      <el-input v-model="userForm.nickname" placeholder="5gaga********yj"></el-input>
                      <el-button type="text" class="btn-link">修改</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <div class="form-item-row">
                      <el-input v-model="userForm.phone" placeholder="+86- 15g********yj"></el-input>
                      <el-button type="text" class="btn-link">更换</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <div class="form-item-row">
                      <el-input v-model="userForm.email" placeholder="无邮箱"></el-input>
                      <el-button type="text" class="btn-link">绑定邮箱</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="密码">
                    <div class="form-item-row">
                      <el-input v-model="userForm.password" type="password" placeholder="***************"></el-input>
                      <el-button type="text" class="btn-link">修改</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="头像">
                    <div class="avatar-uploader">
                      <el-upload
                        class="avatar-upload"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeAvatarUpload"
                        :http-request="uploadAvatar"
                      >
                        <img v-if="userForm.avatar" :src="userForm.avatar" class="avatar" />
                        <div v-else class="upload-placeholder">
                          <div>Upload</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                </el-form>
              </div>

              <div class="form-section">
                <h4>企业身份认证</h4>
                <el-form :model="companyForm" label-width="100px">
                  <el-form-item label="投标供应商">
                    <div class="form-item-row">
                      <el-input v-model="companyForm.name" placeholder="姓名A"></el-input>
                      <el-button type="text" class="btn-link">解绑</el-button>
                      <el-button type="text" class="btn-link">验证</el-button>
                    </div>
                  </el-form-item>
                  <el-form-item label="所属企业">
                    <div class="form-item-row">
                      <el-input v-model="companyForm.company" placeholder="请输入所属企业"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="组织机构代码">
                    <div class="form-item-row">
                      <el-input v-model="companyForm.orgCode" placeholder="请输入代码"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="所属区域">
                      <el-select v-model="companyForm.region" placeholder="请选择">
                        <el-option label="洛阳市" value="luoyang"></el-option>
                        <el-option label="郑州市" value="zhengzhou"></el-option>
                        <el-option label="开封市" value="kaifeng"></el-option>
                        <el-option label="新乡市" value="xinxiang"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="企业规模">
                      <el-select v-model="companyForm.scale" placeholder="请选择">
                        <el-option label="大型企业" value="large"></el-option>
                        <el-option label="中型企业" value="medium"></el-option>
                        <el-option label="小型企业" value="small"></el-option>
                        <el-option label="微型企业" value="micro"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="企业地址">
                    <div class="form-item-row">
                      <el-input v-model="companyForm.address" placeholder="请输入地址"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="企业邮箱">
                    <el-select v-model="companyForm.emailType" placeholder="请选择">
                      <el-option label="企业邮箱" value="company"></el-option>
                      <el-option label="个人邮箱" value="personal"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="营业执照">
                    <div class="license-uploader">
                      <el-upload
                        class="license-upload"
                        action="#"
                        :show-file-list="false"
                        :before-upload="beforeLicenseUpload"
                        :http-request="uploadLicense"
                      >
                        <img v-if="companyForm.license" :src="companyForm.license" class="license" />
                        <div v-else class="upload-placeholder">
                          <i class="el-icon-plus"></i>
                          <div>Upload</div>
                        </div>
                      </el-upload>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm">申请企业认证</el-button>
                    <div style="margin-left: 20px; color: #606266; font-size: 14px; display: flex; align-items: center;">
                      <i class="el-icon-warning" style="margin-right: 5px; color: #e6a23c;"></i>
                      企业身份认证完成后，将开放管理后台登录权限并维护本企业展示信息
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user'; // 引入Pinia store

const userStore = useUserStore();

// 用户表单数据
const userForm = reactive({
  nickname: userStore.phone ? userStore.phone.slice(-4) : '未设置', // 使用手机号后四位作为昵称
  phone: userStore.phone, // 从Pinia获取手机号
  email: '',
  password: '****************',
  avatar: ''
});

// 企业表单数据
const companyForm = reactive({
  name: '姓名A',
  company: '',
  orgCode: '',
  region: '洛阳市',
  scale: '洛阳市',
  address: '',
  emailType: '洛阳市',
  license: '',
  agreement: false
});

// 头像上传前的验证
const beforeAvatarUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是JPG或PNG格式!');
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过2MB!');
  }
  return isJPG && isLt2M;
};

// 营业执照上传前的验证
const beforeLicenseUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isJPG) {
    ElMessage.error('上传营业执照图片只能是JPG或PNG格式!');
  }
  if (!isLt5M) {
    ElMessage.error('上传营业执照图片大小不能超过5MB!');
  }
  return isJPG && isLt5M;
};

// 头像上传
const uploadAvatar = (options) => {
  // 这里应该是实际的上传逻辑，现在使用一个模拟的例子
  // 通常你会使用 axios 或者 fetch 发送请求到服务器
  const file = options.file;
  const reader = new FileReader();
  reader.onload = (e) => {
    userForm.avatar = e.target.result;
    ElMessage.success('头像上传成功');
  };
  reader.readAsDataURL(file);
};

// 营业执照上传
const uploadLicense = (options) => {
  // 同样是模拟的上传逻辑
  const file = options.file;
  const reader = new FileReader();
  reader.onload = (e) => {
    companyForm.license = e.target.result;
    ElMessage.success('营业执照上传成功');
  };
  reader.readAsDataURL(file);
};

// 提交表单
const submitForm = () => {
  if (!companyForm.agreement) {
    ElMessage.warning('请勾选同意协议');
    return;
  }

  ElMessage.success('信息已保存，请等待审核');
  // 这里应该是实际的提交逻辑，可能包括表单验证和接口调用
  console.log('用户信息：', userForm);
  console.log('企业信息：', companyForm);
};
</script>

<style scoped>
/* 主体内容区域样式 */
.main-content {
  flex: 1;
  padding: 20px 0;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

/* 左侧边栏样式 */
.sidebar {
  width: 200px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  padding: 20px 0;
}

.menu-item {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #333;
  transition: all 0.3s;
}

.menu-item i {
  font-size: 20px;
}

.menu-item.active {
  background-color: #edf5ff;
  color: #1890ff;
  border-left: 3px solid #1890ff;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

/* 右侧内容区样式 */
.content {
  flex: 1;
}

.panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.panel-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.panel-body {
  padding: 20px;
}

.form-section {
  margin-bottom: 30px;
}

.form-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-weight: 500;
}

.btn-link {
  margin-left: 10px;
}

/* 上传组件样式 */
.avatar-uploader, .license-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}

.avatar-upload, .license-upload {
  width: 100%;
  height: 100%;
}

.avatar, .license {
  width: 100%;
  height: 100%;
  display: block;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #8c939d;
  font-size: 14px;
}

.upload-placeholder i {
  font-size: 28px;
  margin-bottom: 5px;
}



/* 响应式调整 */
@media (max-width: 1200px) {
  .container {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .footer-top {
    flex-direction: column;
    gap: 20px;
  }
}
</style>

<style scoped>
/* 新增样式 */
.form-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-item-row .el-input {
  flex: 1;
}
</style>
